<template>
    <div class="mainDiv" style="padding: 10px;box-sizing: border-box;">
        <div>
            <el-steps :active="active" center finish-status="success" style="margin: 15px 15px 0px !important" align-center>
                <el-step title="开卡"></el-step>
                <el-step title="结账分配业绩"></el-step>
                <el-step title="分配提成"></el-step>
            </el-steps>
        </div>
        <Order @goto="step" :order="order" v-if="active == 0"></Order>
        <Pay @goto="step" :order="order" :yejilist="yejilist" :paylist="paylist" v-if="active == 1"></Pay>
        <Allot @goto="step" :order="order" :fenpeilist="fenpeilist" :tichenglist="tichenglist" v-if="active == 2"></Allot>
        <Finish @goto="step" :order="order" :paylist="paylist" :fenpeilist="fenpeilist" v-if="active == 3"></Finish>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import Order from './order.vue'
import Pay from './pay.vue'
import Allot from './allot.vue'
import Finish from './finish.vue'

export default {
    name: 'addOpenCard',
    data() {
        return {
            // 重新规划数据
            // 初始化
            // 重要数据（开卡）
            order: {
                id: '',
                status: '',
                remarks: '',
                orderlist: [],
                ginfo: {id: ''}
            },
            // 结账
            paylist: [],
            yejilist: [],
            // 分配
            fenpeilist: [],
            tichenglist: [],

            //杂项          
            active: 0,
        }
    },
    methods: {
        step: function(obj) {
            // 第一步，如果有id掉数据，没有添加
            // 
            // 步骤说明：订单的status=0可以在0,1页面，status=1可以在1,2页面，status=3可以在2,3页面
            if (obj.id) {
                this.order.id = obj.id
            }
            if (obj.status) {
                this.order.status = obj.status
            }

            if (0 == obj.index && (this.order.status && this.order.status != 0)) {
                C.error('请先反结账订单再编辑！')
                return false
            }
            if (1 == obj.index && !this.order.id) {
                C.error('请先保存订单！')
                return false
            }
            if (2 == obj.index) {
                if (!this.order.id || this.order.status == 0) {
                    C.error('请先结账！')
                    return false
                }
            }
            if (this.order.id) {
                this.getorderinfo(this.order.id)
            }
            this.active = obj.index
        },
        getjisuanticheng: async function(id) {
            let data = await C.ajax('/shop/card/getjisuanticheng', { id: id }, 'post')
            if (data) {
                this.tichenglist = data.orderlist
                this.fenpeilist = data.fenpeilist
            }
        },
        getorderinfo: async function(id) {
            let data = await C.ajax('/shop/card/getkaikadaninfo', { id: id })
            if (data) {
                // 赋值订单信息
                this.order = Object.assign(this.order, data.order)

                // 赋值用户信息
                data.ginfo.headurl = data.ginfo.headurl != 0 ? data.ginfo.headurl : '../../../static/img/headimg.jpg'
                this.order.ginfo = data.ginfo
                // 整合订单列表信息
                if (this.order.status === '') {
                    this.active = Number(data.order.status) + 1 
                }
                if (this.active == 2 || this.active == 3) {
                    this.getjisuanticheng(this.order.id)
                }

                data.orderlist.forEach((row) => {
                    row.name = row.typename
                    row.id = row.typeid
                    row.rowtype = row.type
                })
                if (this.order.orderlist.length <= 0) this.order.orderlist = data.orderlist
                // 开始处理付款信息
                let paylist = []
                if (data.accountlist.length > 0) {
                    data.accountlist.forEach((row) => {
                        paylist.push({
                            type: 1,
                            accountname: row.name,
                            accountid: row.accountid,
                            paymoney: row.paymoney
                        })
                    })
                }
                this.paylist = paylist
                // console.log(data.yejilist)
                if (data.yejilist.length > 0) {
                    data.yejilist.forEach((row) => {
                        row.username = row.name
                    })
                }
                this.yejilist = data.yejilist
            }
        }
    },
    mounted: async function() {
        let data = C.getDatas()
        if (data.gid) {
            this.order.ginfo.id = data.gid
        }
        if (data.id) {
            this.order.id = Number(data.id)
        }
        if (data.status) {
            this.order.status = Number(data.status)
        }   
        // id = 1257
        if (!this.order.status && !this.order.id) {
            this.step({index: 0})
        } else {
            this.step({index: Number(this.order.status) + 1})
        }
    },
    components: {Order, Pay, Allot, Finish}
}
</script>
<style>
.el-input.is-disabled .el-input__inner {
    color: #324057;
}

.el-textarea__inner {
    resize: none;
}

#discount {
    width: 100px;
}

#discount i {
    display: none;
}

.el-switch.is-checked .el-switch__core {
    border-color: #20a0ff !important;
    background-color: #20a0ff !important;
}

.money input {
    background: #defff5;
}

.tableClass{
    height: 100%;
    position: relative;
}

.tableClass .el-form-item__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;

}
.el-table__body{
    width: 100%
}
</style>